<template>
    <div class="header">
        <div class="ul-header">
            <ul class="ul-one">
                <li>
                    <span>Hi, 欢迎来到百度糯米</span>
                </li>
                <!-- <li><router-link to="/login">请登录</router-link></li>
                <li><router-link class="two" to="/register">免费注册</router-link></li> -->
                <li><span class="username">{{username}}</span>,<span @click="logout">退出</span></li>
            </ul>
            <ul class="ul-two">
                <li>
                    <router-link class="three" to="/center">个人中心</router-link>
                </li>
                <li>
                    <span ref="b" @mouseleave="Leave" @mouseenter="Enter" class="watch">最近浏览</span>
                    <div class="line">|</div>
                </li>
                <li>
                    <router-link class="four" to="/app">糯米APP</router-link>
                </li>
                <li class="boss">
                    <span>我是商家</span>
                    <div class="lines">|</div>
                    <dl>
                        <dd>商户中心</dd>
                        <dd>我想合作</dd>
                    </dl>
                </li>
                <li>
                    <span>帮助中心</span>
                    <div class="liness">|</div>
                </li>
                <li>
                    <span>食品安全</span>
                </li>
            </ul>
            <div v-show="showing" @mouseenter="Enters" @mouseleave="Leaves"  ref="a" class="box-one">
                暂无浏览记录
                <div class="box"></div>
            </div>
        </div>
       
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { logout } from '../../../api/user'
import Cookies from 'js-cookie'
export default {
    name: 'HomeHeader',
    data() {
        return {
            show: false,
            shows: false
        }
    },
    methods: {
        Enter() {
            this.shows = true
            // this.$refs.a.style.display='block'
        },
        Leave() {
            // this.$refs.a.style.display='none'
            this.show = false
        },
        Enters() {
            this.shows = true
        },
        Leaves() {
            this.shows = false
        },
        // 登出
        logout() {
            console.log('vvvvvvvvv')
            logout().then(res => {
                console.log(res)
                Cookies.remove('token')
                localStorage.clear()
                this.$router.push('/login')
                this.$message({
                    message: '退出成功',
                    type: 'success'
                });
            })
        }
    },
    computed: {
        showing() {
            if (this.show || this.shows) {
                return true
            }
            else {
                return false
            }
        },
        ...mapState({
            username: 'name'
        })
    }
}
</script>

<style media="screen" lang="stylus" scoped>
@import "./media.css"
    .header
        // width: 1520px;
        height: 2.5rem;
        background: #f2f2f2;
        margin-top: -0.94rem;
        .ul-header
            width: 75.63rem;
            height: 2.5rem;
            margin: 0 auto;
            position: relative;
            .ul-one
                display: flex;
                li
                    list-style-type: none;
                    span
                        width: 8.7rem;
                        height: 1.12rem;
                        display: inline-block;
                        margin-top: .7rem;
                        font-size: .87rem;
                        color: #666;
                        margin-right: 1.25rem;
                        box-sizing: border-box;
                        cursor: pointer;
                    a
                        text-decoration: none;
                        font-size: .875rem;
                        color: #B08C4A;
                        margin-right: 1.25rem;
                        display: inline-block;
                        margin-top: 0.69rem;
                        cursor: pointer;
                    .username
                        width: auto;
                        margin-right: 0;
                    .two
                        color: #666;
                    .two:hover
                        color: #B08C4A
            .ul-two
                display: flex;
                position: absolute;
                top: -0.47rem;
                right: 40px;
                .boss:hover {
                    dl {
                        display: block;
                    } 
                }
                li
                    display: inline-block;
                    list-style-type: none;
                    a
                        text-decoration: none;
                        font-size: .875rem;
                        color: #666;
                        margin-right: 1.25rem;
                        display: inline-block;
                    a:hover 
                        color: #B08C4A
                    span
                        width: 4.875rem;
                        height: 2.5rem;
                        margin-right: 2.5rem;
                        display: inline-block;
                        font-size: .875rem;
                        color: #666;
                        cursor: pointer;
                    span:hover
                        color: #B08C4A;
                    .line
                        position: absolute;
                        top: -.06rem;
                        right: 28.43rem;
                        color: #ddd;
                        cursor: pointer;
                    .lines
                        position: absolute;
                        top: -.06rem;
                        right: 16.56rem;
                        color: #ddd;
                        cursor: pointer;
                    dl
                        position: absolute;
                        top: 1.125rem;
                        right: 16.9rem;
                        width: 6.25rem;
                        height: 4.75rem;
                        box-shadow: 0 5px 14px 0 rgba(0, 0, 0, .1);
                        color: #bbb;
                        padding: .625rem 0 0 0;
                        z-index: 9999;
                        display: none;
                        background: #fff;
                        dd
                            margin: 0 auto;
                            margin-bottom: 0.3125rem;
                            text-align: center;
                            cursor: pointer;
                            
                        dd:hover
                            color: #B08C4A; 
                    
                    .liness
                        position: absolute;
                        top: -.06rem;
                        right: 9.06rem;
                        color: #ddd;
                        cursor: pointer;
                    .watch:after
                        content: ' ';
                        position: absolute;
                        right: 30rem;
                        top: 0;
                        width: 0;
                        height: 0;
                        border: .25rem solid transparent;
                        border-bottom-color: #ddd;
                        top: .625rem;
                        border-bottom-color: transparent;
                        border-top-color: #ddd;
                    // .watch:after
                    //     content: ' ';
                    //     position: absolute;
                    //     right: 480px;
                    //     top: 0;
                    //     width: 0;
                    //     height: 0;
                    //     border: 4px solid transparent;
                    //     border-bottom-color: #ddd;
            .box-one
               position: absolute;
               top: 2.5rem;
               width: 21.3rem;
               height: 4.06rem;
               box-shadow: 0 5px 14px 0 rgba(0, 0, 0, .1);
               color: #aaa;
               font-size: .94rem;
               right: 25rem;
               text-align: center;
               padding-top: 2.188rem;
               z-index: 9999;
               background: #fff;
               .box
                    position: absolute;
                    height: .75rem;
                    width: .75rem;
                    box-shadow: 1px 1px 2px rgba(0,0,0,.06);
                    background: #fff;
                    transform: rotate(-135deg);
                    top: -0.313rem;
                    left: 11.4rem;
            // .box-one:before, .box-one:after
            //     border: solid transparent;
            //     content: ' ';
            //     height: 0;
            //     top: 0;
            //     position: absolute;
            //     width: 0;
            // .box-one:after
            //     border-width: 5px;
            //     border-top-color: #fff;
            //     left: 140px;
            // .box-one:after
            //     border-width: 8px;
            //     border-top-color: #000;
            //     left: 18p0;
            // .box-one:after
            //     position: absolute;
            //     border-left: 5px solid transparent;
            //     border-right: 5px solid transparent;
            //     box-shadow: 0 5px 14px 0 rgba(0, 0, 0, .1);
            //     border-bottom: 7px solid #ddd;
            //     content: " ";
            //     display: block;
            //     width: 0px;
            //     height: 0;
            //     top: -8px;
            //     left: 145px;
            //     right: 0;
            
                   
                        
                        
                        
                    
</style>


